<script>
export default {
  name: 'treeChildren',
  data() {
    return {
      postList: {
        NONE: '无',
        ADMINSTRATOR: '负责人',
        DIRECTOR: '主管',
        WOKER: '干事',
      },
    }
  },
  props: {
    treeData: {
      type: [Array, Object],
      default: () => {
        return []
      }
    },
  },
  methods: {
    getDataAndFun(obj, data) {
      this.$emit('getId', obj, data)
    },
  }
}
</script>

<template>
  <div class="children_node">
    <div class="children_node_line_body">
      <div class="children_node_line"></div>
    </div>
    <div class="children_node_view">
      <div class="children_node_view_body" v-for="(data, index) in treeData" :key="index">
        <div class="notSeeLine_left" v-if="index === 0"></div>
        <div class="notSeeLine_right" v-if="index === treeData.length - 1"></div>
        <div class="top_line_body">
          <div class="top_line"></div>
        </div>
        <template v-if="data.child.length === 0">
          <el-popover
              v-if="data.operate && data.operate.length !== 0"
              placement="bottom"
              :width="200"
              trigger="click"
          >
            <template #reference>
              <div class="tree_node" v-if="data.type === 'department'">
                <span class="el-icon-s-home"></span>
                {{ data.label }}
              </div>
              <div class="tree_node" v-else-if="data.type === 'menu'">
                <span class="el-icon-menu"></span>
                {{ data.label }}
              </div>
              <div class="tree_node" v-else-if="data.type === 'teams'">
                <span class="el-icon-s-order"></span>
                {{ data.label }}
              </div>
              <div class="onePersonnel"
                   v-else-if="data.type === 'employees'"
                   :class="[data.isMale ? 'onePersonnel_man' : 'onePersonnel_woman']">
                <div class="onePersonnel_img">
                  <img v-if="data.isMale" src="@/assets/man.png" alt="">
                  <img v-else src="@/assets/woman.png" alt="">
                </div>
                <div class="personnel_content">
                  <div class="personnel_content_li">姓名：{{ data.label }}</div>
                  <div class="personnel_content_li">职务：{{ postList[data.officialRank] }}</div>
                </div>
              </div>
              <div class="tree_node" v-else>
                <span class="el-icon-s-home"></span>
                {{ data.label }}
              </div>
            </template>
            <div class="navList">
              <div class="oneNav" v-for="(nData, nIndex) in data?.operate" :key="nIndex" @click="getDataAndFun({
                fun: nData.funName,
                data: data
              })">{{ nData.btnName }}</div>
            </div>
          </el-popover>
          <template v-else>
            <div class="tree_node" v-if="data.type === 'department'">
              <span class="el-icon-s-home" ></span>
              {{ data.label }}
            </div>
            <div class="tree_node" v-else-if="data.type === 'menu'">
              <span class="el-icon-menu"></span>
              {{ data.label }}
            </div>
            <div class="tree_node" v-else-if="data.type === 'teams'">
              <span class="el-icon-s-order"></span>
              {{ data.label }}
            </div>
            <div class="onePersonnel"
                 v-else-if="data.type === 'employees'"
                 :class="[data.isMale ? 'onePersonnel_man' : 'onePersonnel_woman']">
              <div class="onePersonnel_img">
                <img v-if="data.isMale" src="@/assets/man.png" alt="">
                <img v-else src="@/assets/woman.png" alt="">
              </div>
              <div class="personnel_content">
                <div class="personnel_content_li">姓名：{{ data.label }}</div>
                <div class="personnel_content_li">职务：{{ postList[data.officialRank] }}</div>
              </div>
            </div>
            <div class="tree_node" v-else>
              <span class="el-icon-s-home" ></span>
              {{ data.label }}
            </div>
          </template>
        </template>
        <template v-else>
          <tree-parents :treeData="data" @getId="getDataAndFun"></tree-parents>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tree_node {
  width: max-content;
  height: auto;
  font-size: 16px;
  box-sizing: border-box;
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #939090;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.children_node {
  min-width: 100%;
  width: max-content;
  height: auto;
  position: relative;
  top: -12px;

  .children_node_line_body {
    width: 100%;
    height: 1px;
    position: relative;

    .children_node_line {
      width: 100%;
      height: 1px;
      background-color: #939090;
    }
  }

  .children_node_view {
    min-width: 100%;
    width: max-content;
    height: auto;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-between;
    gap: 50px;

    .children_node_view_body {
      width: max-content;
      position: relative;
      height: auto;

      .notSeeLine_left {
        width: 50%;
        height: 1px;
        position: absolute;
        top: -1px;
        left: 0;
        background-color: #ffffff;
      }

      .notSeeLine_right {
        width: 50%;
        height: 1px;
        position: absolute;
        top: -1px;
        right: 0;
        background-color: #ffffff;
      }

      .top_line_body {
        width: 100%;
        height: auto;
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        align-items: center;
        justify-content: center;

        .top_line {
          width: 1px;
          flex-basis: 1px;
          flex-shrink: 0;
          height: 30px;
          background-color: #939090;
        }
      }
    }
  }
}

.navList {
  width: 100%;
  height: auto;

  .oneNav {
    width: 100%;
    height: 40px;
    cursor: pointer;
    box-sizing: border-box;
    padding-left: 10px;
    line-height: 40px;
    border-bottom: 1px solid #eeeeee;
    background-color: #ffffff;
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      background-color: #eeeeee;
    }
  }
}

.onePersonnel {
  width: max-content;
  height: auto;
  padding: 10px;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  box-sizing: border-box;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.5s;

  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  }

  .onePersonnel_img {
    width: 60px;
    height: auto;
    flex-basis: 60px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding-top: 10px;
    //background: #a4a4a4;

    & > img {
      width: 100%;
      height: auto;
    }
  }

  .personnel_content {
    width: 190px;
    flex-basis: 190px;
    max-width: 190px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding-left: 20px;
    padding-top: 15px;

    .personnel_content_li {
      width: 100%;
      height: 40px;
      overflow: hidden;
      white-space: nowrap;
      font-size: 14px;
      color: rgb(48, 49, 51);
    }
  }
}

.onePersonnel_woman {
  border-top:10px solid rgba(218, 140, 197, 0.98);
}

.onePersonnel_man {
  border-top:10px solid #4290ef;
}
</style>
